<template>
    <div class="flexFS colorFFF hand" style="width: 95px; padding: 8px">
        <img src="@/assets/manage/add.png" alt srcset width="20px" />
        <!-- <span style="margin-left: 5px;">添加图片</span> -->
        <el-upload :action="uploadApi" :before-upload="beforeUpload" :show-file-list="false" :data="{ file_type: 'image' }"
            :headers="headers" :on-progress="handleProgress" :on-success="handleSuccess" multiple>
            <el-button size="small"
                style="margin-left: 5px;border: none;background-color: rgba(0, 0, 0, 0);padding:0;color: #FFF;font-size: 16px;"
                type="">添加图片</el-button>
        </el-upload>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { JSEncrypt } from 'encryptlong' 
import config from '@/utils/config';

export default {
    computed: {
        ...mapGetters(["uploadApi"]),
        headers() {
            return {
                Authorization: "Bearer " + this.$store.state.user.token,
            };
        },
    },
    data() {
        return {
            uploadCount: 0,
            albumList: [],
            totalUploadCount: 0, //用户上传了多少张图片
            successUploadCount: 0, //当前上传的是第几张图片
        }
    },
    methods: {
        handleSuccess(res, file) {
            //文件上传成功时的钩子
            console.log(res, file, 'sdsds')
            let decrypt = new JSEncrypt();
            decrypt.setPrivateKey(config.cert.privateKey);
            var decryptMsg = decrypt.decryptLong(res, 'utf-8');
            let response = JSON.parse(decryptMsg);

            this.albumList.push(response.data[0].full_path)
            this.successUploadCount++;

            // 所有图片上传完成后执行的方法

            if (this.successUploadCount === this.totalUploadCount) {
                // 所有图片都上传成功，执行相应的代码
                this.addAlbum()
                // 重置计数器
                this.totalUploadCount = 0;
                this.successUploadCount = 0;
            }

        },
        handleProgress() {
            //文件上传时的钩子
        },
        beforeUpload(file) {
            console.log('file.length',file)
            this.totalUploadCount++

            // this.totalUploadCount = file.length;
            
            
            //上传之前的钩子
            const isJPG =
                file.type === "image/jpeg" ||
                file.type === "image/png" ||
                file.type === "image/gif" ||
                file.type === "image/jpg";
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error("上传图片只能是 JPG、PNG、GIF、JPEG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },

        addAlbum() {
            this.$request.post('/auth/user-album/create', { url: this.albumList }).then((res) => {
                try {
                    this.$message({
                        message: '上传成功',
                        type: 'success',
                        customClass:"messageClass"
                    })
                    this.albumList = []
                    this.$emit("addAlbumFun",true)
                } catch (err) {
                    console.log('err', err)
                }
            })
        },
    }
}
</script>

<style></style>